<template>
  <div class="page">
    <div class="page-brand">个人资料</div>
    <div class="container flex">
      <div class="left-container g-card h-100">
        <div
          v-for="(item, index) in list"
          :key="item.name"
          class="item flex align-center pointer"
          :class="{ active: index === active }"
          @click="active = index"
        >
          <img :src="item.img" alt="" class="icon">
          <div class="f1">
            <div class="name">{{ item.name }}</div>
            <div class="sub">{{ item.sub }}</div>
          </div>
        </div>
      </div>
      <!--  -->
      <!-- <transition name="el-fade-in"> -->
      <Tab1 v-if="active===0" />
      <Tab2 v-if="active===1" />
      <Tab3 v-if="active===2" />
      <Tab4 v-if="active===3" />
      <!-- </transition> -->
    </div>
  </div>
</template>

<script>
import Tab1 from './components/Tab1.vue'
import Tab2 from './components/Tab2.vue'
import Tab3 from './components/Tab3.vue'
import Tab4 from './components/Tab4.vue'
export default {
  name: 'PersonalSetting',
  components: { Tab1, Tab2, Tab3, Tab4 },
  data() {
    return {
      list: [
        {
          img: require('@/assets/images/personal/icon1.png'),
          name: '个人信息',
          sub: '修改手机号,昵称,用户名等'
        },
        {
          img: require('@/assets/images/personal/icon2.png'),
          name: '实名认证',
          sub: '账户需实名认证通过之后才可使用'
        },
        {
          img: require('@/assets/images/personal/icon3.png'),
          name: '密码安全',
          sub: '修改账户密码'
        },
        {
          img: require('@/assets/images/personal/icon4.png'),
          name: '问题反馈',
          sub: '软件使用问题联系我们'
        }
      ],
      active: 0
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.left-container {
  width: 320px;
  margin-right: 20px;
  .item {
    width: 100%;
    height: 88px;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 0 16px;
    margin-bottom: 10px;
    .icon {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.5);
      margin-right: 12px;
      border-radius: 50%;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(17, 24, 39, 1);
    }
    .sub {
      margin-top: 6px;
    }
  }
  .item.active {
    background: rgba(255, 255, 255, 1);
  }
}
.sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(113, 128, 150, 1);
}
.right-container {
  width: 760px;
  box-sizing: border-box;
  .userinfo {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .card-brand {
    margin-bottom: 26px;
  }
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
  }
  .avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin-right: 24px;
  }
  .link {
    font-size: 14px;
    margin-left: 16px;
  }
  .btn-list {
    margin-top: 16px;
  }
  .white {
    width: 100%;
    max-width: 290px;
  }
}
</style>
